<script lang="ts" setup>
import { ref } from 'vue';
const userName = ref<string>('');
const size = ref(10)


const list = [
  { id: 1, icon: '/gitee.svg' },
  { id: 2, icon: '/github.svg' },
  { id: 3, icon: '/weixin.svg' },
]

</script>

<template>
  <div class="educ-footer">
    <div class="educ-footer-content">
      <div class="educ-footer-content-introduce">
        <div class="educ-footer-content-introduce-text" v-for="item in 3">
          <h4>社区</h4>
          <p>Nuxters</p>
          <p>团队</p>
          <p>设计套件</p>
        </div>
      </div>
      <div class="educ-footer-content-mailbox">
        <h4>订阅我们的QQ邮箱</h4>
        <p>了解最新发布的功能，指南以及社区更新。</p>
        <a-input class="educ-footer-content-mailbox-input" :disabled="true" placeholder="3345474925@qq.com"
          suffix="订阅" />
      </div>
    </div>
    <a-divider class="educ-footer-adivider" />
    <div class="educ-footer-keeponrecord">
      <div class="educ-footer-keeponrecord-text">备案号：浙ILCP备19034671号 备案号：浙ILCP备19034671号 </div>
      <div>
        <img v-for="item in list" :key="item.id" class="educ-footer-keeponrecord-icon" :src="item.icon" alt="">
      </div>
    </div>
  </div>
</template>



<style lang="scss" scoped>
.educ-footer {
  padding-top: 1.25rem;
  background-color: $educ-color-primary;

  &-content {
    display: flex;
    justify-content: space-around;

    &-introduce {
      display: flex;
      justify-content: space-around;
      width: 40%;

      &-text {
        line-height: 1.875rem;
        color: $educ-color-white;
      }
    }

    &-mailbox {
      // 宽度影响输入框长度
      width: 23%;
      line-height: 1.875rem;
      color: $educ-color-white;

      &-input {
        padding: .625rem;
        font-size: 1rem;
        background-color: $educ-color-white;
      }
    }
  }

  // 分割线样式
  &-adivider {
    // 线大小
    height: .0313rem;
    margin: $educ-margin-base 0;

    // 线颜色
    background-color: $educ-color-white;
  }

  &-keeponrecord {
    display: flex;
    align-items: center;
    justify-content: space-around;

    &-text {
      font-size: .9375rem;
      color: $educ-color-white;
    }

    &-icon {
      width: 3rem;
      padding: .25rem;
      margin: $educ-margin-base;
      background-color: $educ-color-white;
      border-radius: 6.25rem;
    }
  }
}

@media screen and (width <= 48rem) {
  .educ-footer {
    &-content-mailbox {
      width: 35%;

      p {
        font-size: 0.8rem;
      }
    }

    &-keeponrecord {
      display: block;
      text-align: center;
    }

  }
}

@media screen and (width <= 30rem) {
  .educ-footer {
    &-content {
      &-introduce {
        display: none
      }

      &-mailbox {
        width: 80%;
      }
    }

    &-keeponrecord {
      &-text {
        font-size: 0.8rem;
      }

      &-icon {
        width: 2rem;
      }
    }
  }
}
</style>
